import React, { Component } from 'react'
import { connect } from 'dva';
import { Radio } from 'antd'
import styles from '../style.css';

import echarts from 'echarts';

interface IProps {
  dispatch?: Function;
  riskTrend?: {
    date: [],
    state1: [],
    state2: [],
  }
}
@connect(({ analyse_risk }) => ({
  riskTrend: analyse_risk.riskTrend,
}))
class EchartComponent extends Component<IProps>{

  readonly state = {
    mode: 3,
  }

  handleChange = (e) => {
    const mode = e.target.value;
    this.setState(() => ({ mode }), () => {
      this.queryData(mode)
    });
  }

  queryData = (mode) => {

    const { dispatch } = this.props;
    dispatch({ type: 'analyse_risk/queryRiskTrend', payload: { type: mode } }).then(() => {

      const { date = null, state1 = null, state2 = null } = this.props.riskTrend;

      // 基于准备好的dom，初始化echarts实例
      if (this.refs.main) {
        let myChart = echarts.init(this.refs.main);
        let option = {
          backgroundColor: "#fff",
          textStyle: {
            color: 'blank',
            fontSize: '26'
          },
          color: ["#FB8E32", "#3AA0FF"],
          title: {
            x: "2%",
            y: "1%",
            textStyle: {
              color: 'blank',
              fontSize: '26'
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: 'blank',
                fontSize: '26'
              },
            }
          },
          legend: {
            data: ['发现隐患数', '完成隐患数'],
            bottom: "2%",
            right: '35%',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 50,
            textStyle: {
              color: 'blank',
              fontSize: '16'
            },
          },
          grid: {
            left: '10%',
            right: '10%',
            top: "15%",
            bottom: '13%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            name: '时间',
            nameTextStyle: {
              fontSize: '14px',
              color: '#000000'
            },
            "axisLine": {
              lineStyle: {
                color: '#999999'
              }
            },
            splitLine: {
              show: false
            },
            data: date
          }],
          yAxis: [{
            type: 'value',
            name: '数量',
            nameTextStyle: {
              fontSize: '14px',
              color: '#000'
            },
            splitNumber: 10,
            "axisLine": {
              lineStyle: {
                color: '#999999'
              },

            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              fontSize: 15
            },

          }],
          series: [{
            name: '发现隐患数',
            barWidth: 20,
            barGap: '0%',
            barCategoryGap: '45px',
            type: 'bar',
            data: state1
          }, {
            name: '完成隐患数',
            barWidth: 20,
            type: 'bar',
            data: state2
          }]
        };

        // 绘制图表
        myChart.setOption(option);
      }
    })

  }

  componentDidMount() {
    this.queryData(3)
  }

  render() {

    return (
      <>
        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
          <div ref="main" style={{ width: '98%', height: 400, paddingTop: 50, margin: '0 auto' }}></div>
          <div style={{ position: 'absolute', top: 30, right: 30 }}>
            <Radio.Group className={styles.radioGroup} buttonStyle="solid" onChange={this.handleChange} value={this.state.mode}>
              <Radio.Button value={1}>本周</Radio.Button>
              <Radio.Button value={2}>本月</Radio.Button>
              <Radio.Button value={3}>全年</Radio.Button>
            </Radio.Group>
          </div>
        </div>
      </>
    )
  }
}

export default EchartComponent;